<template>
  <div class="gift-box" @touchstart.self="hideGift">
    <div class="box-bottom">
      <ul>
        <li @touchstart="selectGift=index" :class="{'selected':(selectGift==index)}" v-for="(gift,index) in giftList" :key="index">
          <img :src="gift.img" alt="">
          <span class="gift-name">{{gift.name}}</span>
          <span class="gift-price">{{gift.price}}</span>
        </li>
      </ul>
      <div class="gift-bottom">
        <div class="number">
          <span class="msg">数量</span>
          <div>
            <img class="sub_num" @touchstart="sendNum >1 && sendNum--" src="../../assets/gift/sub.svg">
            <input class="gift_num" type="text" maxlength="3" v-model="sendNum" />
            <img class="add_num" @touchstart="sendNum++" src="../../assets/gift/add.svg">
          </div>
        </div>

        <div class="total_price">合计:
          <span>{{countTotal}}</span>
          元
        </div>
        <button class="gift_send" @touchstart="sendGift">赠送</button>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    mapGetters
  } from "vuex";
  import './gift.scss';
  export default {
    name: "gift",
    components: {},
    data() {
      return {
        selectGift: 0, //选择的礼物编号
        sendNum: 1, //赠送个数
        giftList: [{
          img: "http://p2ebqp10o.bkt.clouddn.com/1_super_rocket.png",
          name: '超级火箭',
          price: "20000"
        }, {
          img: "http://p2ebqp10o.bkt.clouddn.com/2_rocket.png",
          name: '火箭',
          price: "5000"
        }, {
          img: "http://p2ebqp10o.bkt.clouddn.com/3_plane.png",
          name: '飞机',
          price: "2000"
        }, {
          img: "http://p2ebqp10o.bkt.clouddn.com/4_jingka.png",
          name: '金卡',
          price: "1000"
        }, {
          img: "http://p2ebqp10o.bkt.clouddn.com/5_xiu.png",
          name: '独秀',
          price: "666"
        }, {
          img: "http://p2ebqp10o.bkt.clouddn.com/6_chouqin.png",
          name: '酬勤',
          price: "400"
        }, {
          img: "http://p2ebqp10o.bkt.clouddn.com/7_ruoji.png",
          name: '弱鸡',
          price: "200"
        }, {
          img: "http://p2ebqp10o.bkt.clouddn.com/8_yuwan.png",
          name: '鱼丸',
          price: "10"
        }]
      };
    },
    computed: {
      ...mapGetters(["userInfo", "videoInfo"]),
      countTotal() {
        let gift = this.giftList[this.selectGift];
        let price = gift && gift.price;
        return price * this.sendNum;
      }
    },
    methods: {
      hideGift() {
        this.$emit("hideGift");
      },
      sendGift() {
        let data = Object.assign({
          sendNum: this.sendNum
        }, this.giftList[this.selectGift], {
          userId: this.userInfo.id,
          userName: this.userInfo.name
        }, {
          roomId: this.videoInfo.id
        });

        $loading.show("礼物赠送中...");
        this.$ajax({
          method: "post",
          url: 'giftRecord/give/',
          data: data
        }).then(response => {
          if (response.code === 1) {
            $loading.hide();
            $toast.show("礼物赠送成功", 500);
          }
        });
      }
    }
  };

</script>
